<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非零环绕</title>
</head>
<body>
<canvas id="canvas">该浏览器不支持</canvas>
</body>
<script>
    var WIDTH = 800;
    var HEIGHT = 800;
    window.onload = function () {
        var canvas = document.getElementById("canvas");
        canvas.width = WIDTH;
        canvas.height = HEIGHT;
        var cxt = canvas.getContext('2d');
        cxt.save();
        cxt.beginPath();
        cxt.arc(300,300,100,0,Math.PI*2);
        cxt.arc(300,300,200,0,Math.PI*2,true);
        cxt.fillStyle = "#058";
        cxt.shadowColor = "gray";
        cxt.shadowOffsetX = 10;
        cxt.shadowOffsetY=10;
        cxt.shadowBlur = 10;
        cxt.fill();
        cxt.restore();
    };




    /*
     * 随机数
     * */
    function getRandom(start,end,bool) {
        var diff = end - start;
        if(bool === 0){
            var index = Math.round(Math.random()*diff+start);
        }else {
            var index = Math.random() * diff + start;
        }
        return index;
    }

    /*
     * 随机颜色
     * */
    function getColor() {
        var r = getRandom(0,255,0);
        var g = getRandom(0,255,0);
        var b = getRandom(0,255,0);
        var str = "rgb("+r+","+g+","+b+")";
        return str;
    }
</script>
</html>